<template>
  <div class="main_div">
    <el-card style="width: 50%">
      <el-form v-model="user" label-width="80px" :rules="rulers" :model="user" ref="updateRef">
        <el-form-item label="用户名" prop="name" style="margin-right: 50px">
          <el-input v-model="user.name" :disabled="disable"
                    placeholder="请输入用户名,输入后不可修改,谨慎填写"></el-input>
        </el-form-item>

        <el-form-item label="账号" prop="username" style="margin-right: 50px">
          <el-input v-model="user.username"></el-input>
        </el-form-item>

        <el-form-item label="电话" prop="phone" style="margin-right: 50px">
          <el-input v-model="user.phone" placeholder="请填写电话"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address" style="margin-right: 50px">
          <el-input v-model="user.address" placeholder="请填写地址，非学校输入‘/’"></el-input>
        </el-form-item>
        <el-form-item style="margin-right: 50px; display: flex; justify-content: flex-end">
          <el-button type="primary" @click="update">保存</el-button>
          <el-button type="primary" @click="PasswordVisible">修改密码</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-dialog title="修改密码" :visible.sync="updatePasswordVisible">
      <el-form v-model="changePassword" :model="changePassword" :rules="passwordRules" ref="updatePassword" label-width="80px">
        <el-form-item label="原密码" prop="password" style="margin-right: 30px">
          <el-input v-model="changePassword.password" ></el-input>
        </el-form-item>


        <el-form-item label="新密码" prop="newPassword" style="margin-right: 30px">
          <el-input v-model="changePassword.newPassword"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="again" style="margin-right: 30px">
          <el-input v-model="changePassword.again"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code" style="margin-right: 30px">
          <el-input v-model="changePassword.code" style="width: 50%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updatePasswordVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePassword">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import Request from "@/urils/request";

export default {
  name: "Information",
  data() {
    const passwordJudge = (rule, value, callback) => {
      console.log(value)
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.changePassword.newPassword) {
        callback(new Error('两次输入不同'));
      } else {
        callback();
      }
    };
    return {
      disable: true,
      updatePasswordVisible: false,
      user: JSON.parse(localStorage.getItem('user')),
      rulers: {
        username: [
          {required: true, message: "账号不能为空", trigger: "blur"}
        ],
        name: [
          {required: true, message: "用户名不能为空", trigger: "blur"}
        ]
      },
      changePassword: {
        password: '',
        newPassword: '',
        again: '',
        code: '',
        id: '',
      },
      passwordRules: {
        password: [
          {required: true, message: "原密码不能为空", trigger: "blur"}
        ],
        newPassword: [
          {required: true, message: "新密码不能为空", trigger: "blur"}
        ],
        again:[
          {validator: passwordJudge, trigger: "blur"}
        ],
        code: [
          {required: true, message: "验证码不能为空", trigger: "blur"}
        ],
      }
    }
  },
  methods: {
    update() {
      this.$refs['updateRef'].validate((valid) => {
        if (valid) {
          Request.post('/user/update', this.user).then(res => {
            if (res.code === '200') {
              this.$message.success("更新成功")
              localStorage.setItem('user', JSON.stringify(this.user))
              location.reload();
            } else {
              this.$message.error("更新失败")
            }
          })
        }
      })
    },
    updatePassword() {
      this.$refs['updatePassword'].validate((valid) => {
        if (valid) {
          Request.post('/user/changePassword', this.changePassword).then(res => {
            if(res.code === '200')
            {
              this.$message.success("修改成功,请重新登录");
              this.updatePasswordVisible = false;
              localStorage.removeItem("user")
              this.$router.push("/login")
            }else
            {
              this.$message.error(res.msg)
            }
          })

        }
      })
    },
    PasswordVisible(){
      this.changePassword.password = ''
      this.changePassword.newPassword = ''
      this.changePassword.angain = ''
      this.changePassword.code = ''
      this.changePassword.id = this.user.id
      this.updatePasswordVisible = true
    }
  },
  mounted() {
    if (this.user.name === '') {
      this.disable = false
    }
  }
}
</script>

<style scoped>
.main_div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
</style>